<template>
	<div class="main">
		
		<el-card shadow="never" class="card">
			<div slot="header" class="clearfix">
				<span>条件查询</span>
		
			</div>
			<!-- 查询表单 -->
			<el-form ref="form" :model="form" label-width="80px" size="small" :inline='true'>
				<el-form-item label="订单编号">
					<el-input v-model="form.orderSn"></el-input>
				</el-form-item>
				<el-form-item label="订单类型">
					<el-select v-model="form.orderType" placeholder="订单类型">
						<el-option label="正常订单" :value="0"></el-option>
						<el-option label="秒杀订单" :value="1"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="支付方式">
					<el-select v-model="form.payType" placeholder="支付方式">
						<el-option label="未支付" :value="0"></el-option>
						<el-option label="支付宝" :value="1"></el-option>
						<el-option label="微信" :value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-select v-model="form.status" placeholder="订单状态">
						<el-option label="待付款" :value="0"></el-option>
						<el-option label="待发货" :value="1"></el-option>
						<el-option label="已发货" :value="2"></el-option>
						<el-option label="已完成" :value="3"></el-option>
						<el-option label="已关闭" :value="4"></el-option>
						<el-option label="无效订单" :value="5"></el-option>
					</el-select>
				</el-form-item>
				
				<el-form-item>
					<el-button type="primary"  @click="search">查询</el-button>
					<el-button type="primary" @click="empty">重置</el-button>
		
				</el-form-item>
			</el-form>
		</el-card>
		
		<!-- 表单区 -->
		<el-card shadow="never" class="card">
			<el-table :data="tableData" border style="width: 100%">
				<el-table-column fixed type="index" align="center" width="50" label="序号">
				</el-table-column>
				<el-table-column prop="orderSn" label="订单编号" align="center" width="200">
				</el-table-column>
			
				<el-table-column label="支付方式" width="120">
					<template slot-scope="scope">
						<span>{{scope.row.payType == 0? '未支付':''||scope.row.payType == 1? '支付宝':''||scope.row.payType == 2? '微信':''}}</span>
					</template>
				</el-table-column>
				<el-table-column label="订单状态" width="120">
					<template slot-scope="scope">
						<span>{{scope.row.status == 0? '待付款':''||scope.row.status == 1? '待发货':''||scope.row.status == 2? '已发货':''||scope.row.status == 3? '已完成':''||scope.row.status == 4? '已关闭':''||scope.row.status == 5? '无效订单':''}}</span>
					</template>
				</el-table-column>
				<el-table-column label="添加时间" align="center" width="220">
					<template slot-scope="scope">
						<div>{{scope.row.modifyTime}}</div>
					
					</template>
				</el-table-column>
				<el-table-column prop="memberUsername" label="用户账号" align="center" width="200">
				</el-table-column>
				<el-table-column label="订单类型" width="120">
					<template slot-scope="scope">
						<span>{{scope.row.orderType == 0?'正常订单':'秒杀订单'}}</span>
					</template>
				</el-table-column>
				<el-table-column  label="备注" align="center" width="200">
				</el-table-column>
				
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="el-icon-view" @click="toOredrInfo(scope.row.id)">查看订单</el-button>
						
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<div class="block">
			
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:current-page="page.currentpage" :page-sizes="page.pageSizes" :page-size="page.pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="page.total">
				</el-pagination>
			</div>
			</el-card>
	</div>
</template>

<script>
	import{
		findOrdersByPage,
		
	}from "@/api/order/list/index.js"
	export default{
		data(){
			return{
				searchForm: {},
				form:{
					orderSn:"",
					orderType:0,
					payType:0,
					status:0
				},
				tableData:[],
				// 分页对象
				page: {
					currentpage: 1,
					pageSizes: [10, 15, 20, 25],
					pageSize: 10,
					total: 0
				}
			}
		},
		methods:{
			// 查看订单
			toOredrInfo(id){
				this.$router.push({name:"OrderInfo",params:{id}})
			},
			// 点击查询
			search() {
				// console.log(this.form)
				this.getFindOrdersByPage()
				// 分页初始化
				 this.page = this.$options.data().page
				// 遍历表单把需要查询的数据放到searchForm里
			 	
			 	for (const key in this.form) {
			
			
					this.searchForm[key] = this.form[key]
			
			 	}
			},
			// 分页
			handleSizeChange(val) {
				this.page.pageSize = val
				this.getFindOrdersByPage()
			},
			handleCurrentChange(val) {
				this.page.currentpage = val
				this.getFindOrdersByPage()
			},
			// 重置
			empty(){
				this.form = this.$options.data().form
			},
			// 获取订单列表
			getFindOrdersByPage(){
				findOrdersByPage(this.page.currentpage, this.page.pageSize,this.searchForm).then(res=>{
					this.tableData = res.data.rows
					this.page.total = res.data.total
				})
			}
		},
		created() {
			this.getFindOrdersByPage()
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.main{
		.card{
			margin: 30px;
		}
	}
</style>
